<!--留样台账-->

<template>
  <div class="containerBox wrap">
    <cusCard>
      <div class="searchBox">
        <el-form :model="sampleForm" :inline="true">
          <el-form-item label="留样日期">
            <el-date-picker v-model="sampleForm.sampleTime" type="daterange" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="留样餐段">
            <el-select v-model="sampleForm.mealSegmentId" placeholder="请选择留样餐段" @change="searchHandler">
              <el-option v-for="item in mealList" :key="item.id" :label="item.mealSegmentName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-select v-model="sampleForm.deviceId" placeholder="请选择设备名称" @change="searchHandler">
              <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName"
                :value="item.deviceId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>

      </div>
    </cusCard>
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="exportHandler" :disabled="!pageObj.total">
        留样台账导出
      </cusButton>
      <cusTable :tableData="ledgerTableData" :tableColumns="tableColumns" @changeCol="changeCol" @changeRow="changeRow"
        :loading="loading" :height="460" :showSelect="false">
        <template #keepStatus="{ row }">
          <div v-if="row.keepStatus == 0">
            <p class="radio" style="background: hwb(120 81% 18%);"> </p>
            未留样
          </div>
          <div v-if="row.keepStatus == 1">
            <p class="radio" style="background: #0052D9;"></p>已留样

          </div>
          <div v-if="row.keepStatus == 2">
            <p class="radio" style="background: #D54941;"></p>已到期

          </div>
          <div v-if="row.keepStatus == 3">
            <p class="radio" style="background: #2BA471;"></p>已取样

          </div>
        </template>

        <template #hasEx="{ row }">
          <div v-if="row.hasEx == 0">
            <p class="radio" style="background: #0052D9;"></p>无
          </div>
          <div v-if="row.hasEx == 1">
            <p class="radio" style="background: #D54941;"></p>有
          </div>
        </template>

        <template #sampleTime="{ row }">
          <div>
            {{ formatSeconds(row.sampleTime) }}
          </div>
        </template>

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="lookDetail(row)">详情
          </cusButton>

        </template>
      </cusTable>

      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <detailDialog ref="detailDiaRef"></detailDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqKeepLedgerList, reqExportLedge, reqUnitAllDevice, } from "@/api/business/device";
import { reqMealList } from "@/api/business/dishes";
import { getThisWeekTime } from '@/utils/time';
import detailDialog from './components/detailDialog.vue'

const router = useRouter();

const formOrigin = () => ({
  mealSegmentId: "",
  sampleTime: getThisWeekTime(),
  deviceId: '',
});

const sampleForm = ref(formOrigin());

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

const searchHandler = () => {
  getKeepLedgerList();
};

// 重置查询
const resetHandler = () => {
  sampleForm.value = formOrigin();
  pageObj.value = pageInit();
  getKeepLedgerList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getKeepLedgerList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getKeepLedgerList();
};

// 表格列数据
const tableColumns = reactive([
  { label: "留样日期", prop: "gmtKeep", width: "180", sortable: true },
  { label: "餐段", prop: "mealSegmentName", width: "150" },
  { label: "留样人", prop: "operator", width: "150" },
  { label: "留样时间", prop: "keepTime", width: "200", sortable: true },
  { label: "取样时间", prop: "gmtTake", width: "200", sortable: true },
  { label: "取样人", prop: "takeOperator", width: "150" },
  { label: "留样时长", prop: "sampleTime", width: "150", sortable: true, slot: true },
  { label: "状态", prop: "keepStatus", slot: true, width: "150" },
  { label: "设备名称", prop: "deviceName", width: "150" },
  { label: "紧急开门", prop: "hasEx", slot: true, width: "150" },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "180",
    fixed: "right",
  },
]);


const formatSeconds = (time: string) => {
  let theTime = parseInt(time) // 秒
  let theTime1 = 0 // 分
  let theTime2 = 0 // 小时
  if (theTime > 60) {
    theTime1 = parseInt(theTime / 60)
    theTime = parseInt(theTime % 60)
    if (theTime1 > 60) {
      theTime2 = parseInt(theTime1 / 60)
      theTime1 = parseInt(theTime1 % 60)
    }
  }
  let result = '' + parseInt(theTime) + '秒'
  if (theTime1 > 0) {
    result = '' + parseInt(theTime1) + '分' + result
  }
  if (theTime2 > 0) {
    result = '' + parseInt(theTime2) + '小时' + result
  }
  return result || ''
}

// 导出台账
const exportHandler = () => {
  reqExportLedge({
    mealSegmentId: sampleForm.value.mealSegmentId,
    beginTime: sampleForm.value.sampleTime[0],
    endTime: sampleForm.value.sampleTime[1],
  }).then((res) => {
    let blob = new Blob([res]);
    let downloadElement = document.createElement("a");
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    downloadElement.download = "留样台账" + ".xlsx"; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
  });
};

const ledgerTableData = ref([]);

const getKeepLedgerList = () => {
  if (!sampleForm.value.sampleTime) {
    ElMessage.info('请选择日期')
    return false
  }
  loading.value = true;
  reqKeepLedgerList({
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
    mealSegmentId: sampleForm.value.mealSegmentId,
    deviceId: sampleForm.value.deviceId,
    beginTime: sampleForm.value.sampleTime[0],
    endTime: sampleForm.value.sampleTime[1],
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      ledgerTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};
// 餐段列表
const mealList = ref([]);
const getMealList = () => {
  reqMealList({
    currentPage: 1,
    pageSize: 3000,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      mealList.value = res.data.list;
    }
  });
};

// 设备列表
const deviceList = ref([])
const getDeviceList = () => {
  reqUnitAllDevice().then((res) => {
    loading.value = false;
    if (res.code == 1) {
      deviceList.value = res.data
    }
  });
};


const detailDiaRef = ref(null)

// 查看详情
const lookDetail = (row) => {
  console.log(row)
  detailDiaRef.value.show(row.id)
}

onMounted(() => {

  getDeviceList()
  getMealList()
  getKeepLedgerList();
});
</script>

<style lang="scss" scoped>
.radio {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 8px;
}
</style>